.componentCard {
  background-color: #ffe5cc;
  border: 1px solid var(--ifm-background-surface-color-secondary);
  border-radius: var(--ifm-global-radius);
  box-shadow: var(--ifm-panel-box-shadow);
  color: var(--ifm-font-base-color);
  display: inline-block;
  margin: 3px;
  padding: calc( var(--ifm-spacing-vertical) * 1 ) calc( var(--ifm-spacing-horizontal) * 1.5 );
}

.componentCard:hover {
  text-decoration: none;
  background-color: #ffd9b3;
}

.componentCard > * {
  color: var(--ifm-font-base-color);
}

/* Fix text color in dark mode */
html[data-theme='dark'] .componentCard {
  color: #333;
}

html[data-theme='dark'] .componentCard > * {
  color: #333;
}